<template>
	<view class="content">
		<view class="safeContent">
			<!-- 返回 -->
			<view class="topCom">
				<van-nav-bar class="nav" left-arrow @click-left="onClickLeft">
					<template #title>
						<p class="title">升级记录</p>
					</template>
				</van-nav-bar>
			</view>
			<!-- 内容 -->
			<view class="cont">
				<view class="title">
					已达10星会员
				</view>
				<view class="time" v-for="(item,index) in Data" :key="index">
					<view>{{item.grade}}</view>
					<view>{{item.time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from 'vue'
	// 点击回到发现页面
	const onClickLeft = () => history.back();
	const Data = ref([
		{grade:"10星会员",time:"2023年10月15日"},
		{grade:"9星会员",time:"2023年10月15日"},
		{grade:"8星会员",time:"2023年10月15日"},
		{grade:"7星会员",time:"2023年10月15日"},
		{grade:"6星会员",time:"2023年10月15日"},
		{grade:"5星会员",time:"2023年10月15日"},
		{grade:"4星会员",time:"2023年10月15日"},
		{grade:"3星会员",time:"2023年10月15日"},
		{grade:"2星会员",time:"2023年10月15日"},
		{grade:"1星会员",time:"2023年10月15日"},
	])
</script>

<style>
	.content {
		min-height: 100vh;
	}

	@import '../../common.scss';

	.nav {
		--van-nav-bar-height: 88px;
		background-color: transparent;
		--van-nav-bar-icon-color: #ffffff;
		--van-nav-bar-text-color: #ffffff;
		--van-nav-bar-title-text-color: #ffffff;
		--van-nav-bar-arrow-size: 36px;
		--van-nav-bar-title-font-size: 36px;


		.title {
			height: 88px;
			font-size: 36px;
			font-weight: 500;
		}
	}

	::v-deep.van-nav-bar__title.van-ellipsis {
		line-height: 88px;
	}

	::v-deep.van-hairline--bottom:after {
		border-bottom-width: 0px !important;
	}
	.content{
		
		.safeContent{
			width: calc(100% - 62px);
			margin: 0 auto;
			padding-top: 28px;
		}
		.cont{
			color: #fff;
			background: #2A2B2E;
			border-radius: 32px;
			margin-top: 80px;
			.title{
				font-size: 36px;
				line-height: 130px;
				margin-left: 40px;
			}
			.time{
				display: flex;
				justify-content: space-evenly;
				font-size: 26px;
				line-height: 80px;
			}
		}
	}
</style>